<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间展示</title>
    <style>
        .div1{
            width: 500px;
            height: 200px;
            background-color: royalblue;
            margin: 0 auto;
            text-align: center;
            font-size: 23px;
            position: relative;
            top: 100px;
            line-height: 200px;
        }
        span{
            color: lawngreen;
        }
    </style>
</head>
<body>
    <div class="div1" id="showNowTime"></div>
    <script type="text/javascript">
        function showTime() {
            var dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var hour = dt.getHours();
            var m = dt.getMinutes();
            var s = dt.getSeconds();
            document.getElementById("showNowTime").innerHTML = y + "<span>年</span>"+mt+"<span>月</span>"+day+"<span>日</span>"+hour+"<span>时</span>"+m+"<span>分</span>"+s+"<span>秒</span>";
        }
        setInterval(showTime, 1000);
    </script>

</body>
</html>